<template>
  <!--选择设备-->
  <j-modal :title="title" :width="width" :visible="visible" switchFullscreen @ok="handleOk"
    :okButtonProps="{ class:{'jee-hidden': disableSubmit} }"
    :cancelButtonProps="{ class:{'jee-hidden': disableSubmit} }" @cancel="handleCancel" cancelText="关闭" okText="确定">
    <!--表单-->
    <a-spin :spinning="confirmLoading">
      <j-form-container class="scroll-view" style="height: 600px">
        <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
          <!--style="border:0.5px solid #eee;padding: 10px 0;"-->
          <a-row>
            <a-col :span="12">
              <a-form-model-item label="归属项目" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="projectName"
                style="margin-bottom: 10px;">
                <a-select :disabled="disabled" placeholder="请选择归属项目" :value="model.projectName"
                  @change="handleChange('project',$event)">
                  <a-select-option v-for="(item,index) in projectList" :key="index" :value="item">
                    {{item.label}}
                  </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="设备类型" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="typeName"
                style="margin-bottom: 10px;">
                <div style="display: flex;align-items: center;">
                  <a-select :disabled="true" placeholder="请选择分类" :value="model.categoryOneName"
                    @change="handleChange('categoryOne',$event)" style="margin-right: 10px;width: 174px;">
                    <a-select-option v-for="(item,index) in categoryOneList" :key="index" :value="item">
                      {{item.label}}
                    </a-select-option>
                  </a-select>
                  <a-select :disabled="disabled" placeholder="请选择设备类型" :value="model.typeName"
                    @change="handleChange('type',$event)" style="width: 174px;">
                    <a-select-option v-for="(item,index) in typeList" :key="index" :value="item">
                      {{item.label}}
                    </a-select-option>
                  </a-select>
                </div>
              </a-form-model-item>
            </a-col>
            </a-row>
            <a-row>
              <a-col :span="12">
                <a-form-model-item label="设备名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="name"
                  style="margin-bottom: 10px;">
                  <a-input :disabled="disabled" v-model="model.name" placeholder="请输入设备名称"></a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="12">
                <a-form-model-item label="规格型号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="model"
                  style="margin-bottom: 10px;">
                  <a-input :disabled="disabled" v-model="model.model" placeholder="请输入规格型号"></a-input>
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row>
            <a-col :span="24" style="display: flex;justify-content: flex-end;">
              <a-button type="primary" @click="searchQuery" icon="search"
                style="width: 100px;height: 30px;margin-right: 10px;">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload"
                style="width: 100px;height: 30px;margin-right: 40px;">重置</a-button>
            </a-col>
          </a-row>

          <a-row style="margin: 10px 0 20px;">
            <a-col :span="24">
              <span style="font-size: 16px; font-weight: bold;">查询结果</span>
            </a-col>
          </a-row>

          <a-row><!--:row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"-->
            <a-col :span="24">
              <a-table :columns="columns" :dataSource="deviceList" :pagination="false"
                style="margin-bottom: 20px;">
                <template v-for="(col, i) in ['name', 'relation', 'phone','taxRate','taxInclusiveMoney','money']"
                  :slot="col" slot-scope="text, record, index">
                  <a-input :key="col" v-if="record.editable && (col != 'taxRate')" style="margin: -5px 0" :value="text"
                    :placeholder="columns[i].title" @change="e => handleChange2(e.target.value, record.key, col)" />
                  <a-input-number :key="col" v-else-if="record.editable && (col == 'taxRate')" :min="0" :max="100"
                    :step="0.1" :default-value="text" :formatter="text => `${text}%`"
                    :parser="text => text.replace('%', '')" :placeholder="columns[i].title" style="margin: -5px 0"
                    @change="e => handleChange3(e, record.key, col)" />
                  <template v-else>{{ text }}</template>
                </template>
                <template slot="is_sel" slot-scope="text, record, index">
                  <div @click="tosel(text, record, index)" v-if="!text" style="width: 20px;height: 20px;border-radius: 10px;border: 2px solid #999;"></div>
                  <a-icon @click="tosel(text, record, index)" v-else type="check-circle" theme="filled" style="font-size: 20px;color: #0066cc;"/>
                </template>
                <template slot="operation" slot-scope="text, record, index">
                  <template v-if="record.editable">
                    <span v-if="record.isNew">
                      <a @click="saveRow(record.key)">添加</a>
                      <a-divider type="vertical" />
                      <a-popconfirm title="是否要删除此行？" @confirm="remove(record.key)">
                        <a>删除</a>
                      </a-popconfirm>
                    </span>
                    <span v-else>
                      <a @click="saveRow(record.key)">保存</a>
                      <a-divider type="vertical" />
                      <a @click="cancel(record.key)">取消</a>
                    </span>
                  </template>
                  <span v-else>
                    <a @click="toggle(record.key)">编辑</a>
                    <a-divider type="vertical" />
                    <a-popconfirm title="是否要删除此行？" @confirm="remove(record.key)">
                      <a>删除</a>
                    </a-popconfirm>
                  </span>
                </template>
              </a-table>
            </a-col>
          </a-row>

        </a-form-model>
      </j-form-container>
    </a-spin>
  </j-modal>
</template>

<script>
  import {
    httpAction,
    getAction,
    postAction
  } from '@/api/manage'
  export default {
    name: 'WtDevicetypeModal',
    data() {
      return {
        title: '',
        width: 1000,
        visible: false,
        disableSubmit: false,
        //表单
        confirmLoading: false,
        labelCol: {
          xs: {
            span: 24
          },
          sm: {
            span: 6
          }
        },
        wrapperCol: {
          xs: {
            span: 24
          },
          sm: {
            span: 16
          }
        },
        labelCol2: {
          xs: {
            span: 24
          },
          sm: {
            span: 3
          }
        },
        wrapperCol2: {
          xs: {
            span: 24
          },
          sm: {
            span: 21
          }
        },
        labelCol3: {
          xs: {
            span: 24
          },
          sm: {
            span: 12
          }
        },
        wrapperCol3: {
          xs: {
            span: 24
          },
          sm: {
            span: 12
          }
        },
        validatorRules: {},
        model: {
          id:'',
          projectName: '',
          projectId: '',
          categoryOneName: '',
          categoryOneId: '',
          typeName: '',
          type: '',
          name: '',
          model: '',
          number: '',
        },
        projectList: [], //项目列表
        categoryOneList: [], //设备
        typeList: [], //设备类型
        nameList: [], //设备名称
        deviceList: [], //设备列表
        url: {
          add: '',
          edit: '',
          list: '/equipment/wtEquipment/getWtEquipmentModelList',
          detail: '',
          delete: '',
        },
        disabled: false,
        columns: [{
            title: '',
            dataIndex: 'is_sel',
            width: '5%',
            scopedSlots: {
              customRender: 'is_sel'
            }
          },{
            title: '设备编号',
            dataIndex: 'number',
            key: 'number',
            width: '20%',
          },
          {
            title: '归属项目',
            dataIndex: 'projectName',
            key: 'projectName',
            width: '20%',
          },
          {
            title: '设备类型',
            dataIndex: 'typeName',
            key: 'typeName',
            width: '15%',
          },
          {
            title: '设备名称',
            dataIndex: 'name',
            key: 'name',
            width: '20%',
          },
          {
            title: '规格型号',
            dataIndex: 'model',
            key: 'model',
            width: '20%',
          },
        ],
        selectedRowKeys: [],
        selectedRowKeyss: [],
      }
    },
    created() {
      this.searchQuery();
    },
    mounted() {

    },
    methods: {
      tosel(text,item,index){
        console.log(222,text,item,index)
        if(this.deviceList && this.deviceList.length>0){
          this.deviceList.forEach((ite,ind)=>{
            if(index === ind){
              ite.is_sel = true;
            }else{
              ite.is_sel = false;
            }
          })
          this.$forceUpdate();
        }
      },
      //重置
      searchReset() {
        this.model = {
          id:'',
          projectName: '',
          projectId: '',
          categoryOneName: '',
          categoryOneId: '',
          typeName: '',
          type: '',
          name: '',
          model: '',
          number: '',
        }
        this.searchQuery();
      },
      //查询
      searchQuery() {
        this.deviceList = [];
        let params = {};
        params = this.model;
        // 触发表单验证
        this.confirmLoading = true;
        console.log('提交表单', params)
        // debugger
        getAction(
          `/equipment/wtEquipment/getWtEquipmentModelList?projectId=${this.model.projectId}&categoryOneId=${this.model.categoryOneId}&type=${this.model.type}&number=${this.model.number}&model=${this.model.model}&name=${this.model.name}&id=${this.model.id}`
        ).then((res) => {
          console.log(12, res);
          if (res && res.length > 0) {
            this.deviceList = res.map(v => ({
              ...v,
              key: v.id,
              is_sel:false,
            }));
          }
        }).finally(() => {
          this.confirmLoading = false;
        })
      },
      onSelectChange(selectedRowKeys) {
        console.log(1,selectedRowKeys)
        this.selectedRowKeys = selectedRowKeys;
        let selectedRowKeyss = [];
        if (selectedRowKeys && selectedRowKeys.length > 0) {
          selectedRowKeys.forEach(item=>{
            if (this.deviceList && this.deviceList.length > 0) {
              this.deviceList.forEach(ite => {
                  if(item === ite.id){
                    selectedRowKeyss.push(ite)
                  }
              })
            }
          })
        }
        this.selectedRowKeyss = selectedRowKeyss;
      },
      //下拉选择
      handleChange(type, item, index) {
        console.log(1, type, item, index);
        let _self = this;
        if (type === 'project') {
          this.model.projectName = item.label;
          this.model.projectId = item.value;
        } else if (type === 'type') {
          this.model.typeName = item.label;
          this.model.type = item.value;
        }
      },
      //获取数据字典列表
      Dictionary() {
        var _self = this;
        //项目列表
        getAction(`/sys/sysDepart/getDepartByOrgType?orgType=1`).then((res) => {
          if (res.success) {
            this.projectList = [];
            let treeList = res.result;
            this.projectList = [...treeList].map((v) => ({
              ...v,
              value: v.id,
              label: v.departName,
            }))
          }
        })

        //设备类型
        getAction('/wtCategory/list').then((res) => {
          if (res.success) {
            let treeList1 = res.result;
            let treeList = [];
            if (treeList1 && treeList1.length > 0) {
              treeList1.forEach(ite => {
                if (ite.name === '设备机械') {
                  this.model.categoryOneId = ite.id;
                  this.model.categoryOneName = ite.name;
                  let categoryOneList = [];
                  categoryOneList.push(ite);
                  this.categoryOneList = categoryOneList.map(v => ({
                    ...v,
                    value: v.id,
                    label: v.name,
                  }));
                  if (ite.children && ite.children.length > 0) {
                    treeList = ite.children;
                  }
                }
              })
              if (treeList && treeList.length > 0) {
                this.typeList = [...treeList].map((v) => ({
                  ...v,
                  value: v.id,
                  label: v.name,
                }))
              }
            }
          }
        })
      },
      add(type, record) {
        this.visible = true;
        this.Dictionary();
      },
      edit(type, record) {
        this.visible = true;
        this.Dictionary();
      },
      close() {
        this.$emit('close');
        this.visible = false;
      },
      handleOk() {
        const _self = this;
        let selectedRowKeyss = [];
        if(this.deviceList && this.deviceList.length>0){
          this.deviceList.forEach((ite,ind)=>{
            if(ite.is_sel){
              selectedRowKeyss.push(ite)
            }
          })
        }
        this.selectedRowKeyss = selectedRowKeyss;
        this.$emit('ok',this.selectedRowKeyss);
        this.visible = false;

      },
      submitCallback() {
        this.$emit('ok');
        this.visible = false;
      },
      handleCancel() {
        this.close()
      }
    }
  }
</script>
<style scoped>
  .scroll-view {
    overflow: auto;
    overflow-y: scroll;
  }
</style>